<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<TestBat.Frontend.Controllers.ViewData.Test.TestViewData>" %>
<%@ Import Namespace="TestBat.Frontend.Helpers" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Header" runat="server">
	Test
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <!-- counter -->
    <script src="<%=Url.Content("~/Scripts/jquery.jCountr.1.2.js") %>" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#countdown').counter(
            {
                hour: <%= Model.Test.TimeLeft.Hours %>,
                min: <%= Model.Test.TimeLeft.Minutes %>,
                sec: <%= Model.Test.TimeLeft.Seconds %>,
                message: "Time up"
            });
        });
    </script>
    
    <!-- tabs -->
    <script src="<%=Url.Content("~/Scripts/jquery-ui-1.8.1.custom.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();

            $(".previousTab").click(previousTab);
            $(".nextTab").click(nextTab);
        });

        function nextTab() {
            var selected = $("#tabs").tabs('option', 'selected');

            if (selected + 1 < $("#tabs").tabs("length"))
                $("#tabs").tabs('select', ++selected);
        }

        function previousTab() {
            var selected = $("#tabs").tabs('option', 'selected');

            if (selected > 0)
                $("#tabs").tabs('select', --selected);
        }
    </script>
    
    
    <% using(Html.BeginForm("Finish", "Test", FormMethod.Post))
        { %>
    
        <div id="tabs">
            
            <div id="countdownArea">
                <p>Time remaining: <span id="countdown"></span></p>
            </div>
            
            <!-- render tab headers -->
            <ul>
                <div style="float: left;position: relative;top: 1px;margin: 0 1px 1px 0;padding: 0;white-space: nowrap;border: 1px solid #CCCCCC; background-color: #F6F6F6;">
                    <a href="javascript:void(0);" class="previousTab" style="float: left;padding: .25em .25em;text-decoration: none;"><span>&lt;</span></a>
                </div>
                <% int i = 1; %>
                <% foreach (TestBat.IModels.Domain.ITestTask tt in Model.Test.TestTasks)
                   { %>
                    <li><a href="#tab<%= tt.ID %>"><span><%= i %></span></a></li>
                    <% i++; %>
                <% } %>
                <div style="float: left;position: relative;top: 1px;margin: 0 1px 1px 0;padding: 0;white-space: nowrap;border: 1px solid #CCCCCC; background-color: #F6F6F6;">
                    <a href="javascript:void(0);" class="nextTab" style="float: left;padding: .25em .25em;text-decoration: none;"><span>&gt;</span></a>
                </div>
            </ul>
            
            <br style="clear: both" />
            
            <!-- render tabs -->
            <% foreach (TestBat.IModels.Domain.ITestTask tt in Model.Test.TestTasks)
               { %>
               <div id="tab<%= tt.ID %>">
                   <% if (tt is TestBat.IModels.Domain.ITestEssayTask)
                      { %>
                        <div class="task essayTask">
                            <% Html.RenderPartial("~/Views/Test/Tasks/EssayTask.ascx", new TestBat.Frontend.Controllers.ViewData.Test.Tasks.EssayTaskViewData { TestTaskID = tt.ID, Solution = tt.Solution as TestBat.IModels.Domain.IEssaySolution, Task = tt as TestBat.IModels.Domain.ITestEssayTask }); %>
                        </div>
                   <% }
                      else if (tt is TestBat.IModels.Domain.ITestMultipleChoiceTask)
                      { %>
                        <div class="task multipleChoiceTask">
                            <% Html.RenderPartial("~/Views/Test/Tasks/MultipleChoiceTask.ascx", new TestBat.Frontend.Controllers.ViewData.Test.Tasks.MultipleChoiceTaskViewData { TestTaskID = tt.ID, Solution = tt.Solution as TestBat.IModels.Domain.IMultipleChoiceSolution, Task = tt as TestBat.IModels.Domain.ITestMultipleChoiceTask }); %>
                        </div>
                      <%
                       }
                       else if (tt is TestBat.IModels.Domain.ITestMultipleResponseTask)
                       { %>
                         <div class="task multipleResponseTask">
                             <% Html.RenderPartial("~/Views/Test/Tasks/MultipleResponseTask.ascx", new TestBat.Frontend.Controllers.ViewData.Test.Tasks.MultipleResponseTaskViewData { TestTaskID = tt.ID, Solution = tt.Solution as TestBat.IModels.Domain.IMultipleResponseSolution, Task = tt as TestBat.IModels.Domain.ITestMultipleResponseTask }); %>
                         </div>
                      <%
                       }
                      else
                      { %>
                        <p>No suitable Task-renderer found!</p>
                   <% } %>
               </div>
            <% } %>

            <div id="tabNavigation">
                <div style="float:left; margin-left:140px"><%= Html.ImageLink(null, "~/Styles/Icons/16x16/previous.png", "Previous question", "previousTab", "", true)%></div>
                <div style="float:right; margin-right:140px"><%= Html.ImageLink(null, "~/Styles/Icons/16x16/next.png", "Next question", "nextTab", "", false)%></div>
            </div>
            
            <br style="clear: both" />
            
        </div>
    
        <input type="hidden" name="testID" value="<%= Model.Test.ID %>" />
        <div style="margin: 30px 10px 10px 10px; border: 1px solid #CCCCCC; background: #FCFCFC; padding: 10px;">
            <input type="submit" value="Finish test" id="submitButton" style="width:800px; height:40px; display: block; margin: 0 auto; font-size: 1.4em;" />
        </div>
    <% } %>

</asp:Content>
